<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网络应用</title>
</head>

<body>
    <div id="app">
        <input type="button" value="get请求" class="get" @click="ig">
        <input type="button" value="post请求" class="post">
        <p>{{message}}</p>
    </div>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                message:"想看笑话吗？"
            },
            methods: {
                ig:function(){
                    var mes=this;
                    axios.get("https://autumnfish.cn/api/joke/list?num=1").then(function(response){
                        mes.message=response.data.jokes[0];
                        console.log(response.data.jokes[0]);
                    })
                }
            },
        })
        // /*
        //     接口1:随机笑话
        //     请求地址:https://autumnfish.cn/api/joke/list
        //     请求方法:get
        //     请求参数:num(笑话条数,数字)
        //     响应内容:随机笑话
        // */
        // document.querySelector(".get").onclick = function () {
        //     axios.get("https://autumnfish.cn/api/joke/list?num=6").then(function (response) {
        //         console.log(response.data.jokes[1]);
        //     }, function (error) {
        //         console.log(error); s
        //     })
        // }

        // /*
        //      接口2:用户注册
        //      请求地址:https://autumnfish.cn/api/user/reg
        //      请求方法:post
        //      请求参数:username(用户名,字符串)
        //      响应内容:注册成功或失败
        //  */
        // document.querySelector(".post").onclick = function () {
        //     axios.post("https://autumnfish.cn/api/user/regasf", {
        //         username: "hahah123",
        //     }).then(function (response) {
        //         console.log(response)
        //     }, function (error) {
        //         console.log(error);
        //     })
        // }
    </script>
</body>

</html>